import React, { useState } from 'react';
import {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    UserOutlined,
} from '@ant-design/icons';
import {
    useNavigate
} from "react-router-dom";
import IndexRouter from '../../router/IndexRouter';
import { Layout, Menu, Button, theme } from 'antd';
import './NewsSandBox.css'
const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu
const menuList = [
    {
        key: "/home",
        title: "首页",
        icon: <UserOutlined />
    },
    {
        key: "/user-manage",
        title: "用户管理",
        icon: <UserOutlined />,
        children: [
            {
                key: "/user-manage/list",
                title: "用户列表",
                icon: <UserOutlined />
            }
        ]
    },
    {
        key: "/right-manage",
        title: "权限管理",
        icon: <UserOutlined />,
        children: [
            {
                key: "/right-manage/role/list",
                title: "角色列表",
                icon: <UserOutlined />
            },
            {
                key: "/right-manage/right/list",
                title: "权限列表",
                icon: <UserOutlined />
            }
        ]
    }
]
const NewsSandBox = () => {

    const [collapsed, setCollapsed] = useState(false);
    const {
        token: { colorBgContainer },
    } = theme.useToken();
    const navigate = useNavigate();
    const renderMenu = (menuList) => {
        return menuList.map(item => {
            if (item.children?.length > 0) {
                return <SubMenu key={item.key} title={item.title} icon={item.icon}>
                    {renderMenu(item.children)}
                </SubMenu>
            }
            return <Menu.Item key={item.key} icon={item.icon} onClick={() => {
                //  console.log(props)
                navigate(item.key)
            }}>{item.title}</Menu.Item>
        })
    }
    return (
        <Layout>
            <Sider trigger={null} collapsible collapsed={collapsed}>
                <div className="demo-logo-vertical" style={{ fontSize: collapsed ? '12px' : '20px' }}>新闻发布系统</div>
                <Menu
                    theme="dark"
                    mode="inline"
                    defaultSelectedKeys={['1']}
                >
                    {renderMenu(menuList)}
                </Menu>
            </Sider>
            <Layout>
                <Header
                    style={{
                        padding: 0,
                        background: colorBgContainer,
                    }}
                >
                    <Button
                        type="text"
                        icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
                        onClick={() => setCollapsed(!collapsed)}
                        style={{
                            fontSize: '16px',
                            width: 64,
                            height: 64,
                        }}
                    />
                </Header>
                <Content
                    style={{
                        margin: '24px 16px',
                        padding: 24,
                        height: '100%',
                        background: colorBgContainer,
                    }}
                >
                    <IndexRouter />
                </Content>
            </Layout>
        </Layout>
    );
};
export default NewsSandBox;